<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<!-- 导入css样式 -->
		<link href="../lib/css/bootstrap.min.css" rel="stylesheet" />
		
		<!-- 导入jQuery库 -->
		<script type="text/javascript" src="../lib/jquery/jquery-1.11.3.min.js" ></script>
		
		<!-- 导入js库 -->
		<script type="text/javascript" src="../lib/js/bootstrap.min.js" ></script>
	</head>
	<body>
	
	<h1>1-按钮的样式</h1>
	<h2>1.1- 几种常用按钮样式</h2>
	<table class="table">
		<tr><th>Class</th><th>描述</th></tr> 
		<tr><td>btn</td><td>默认的/标准的按钮。</td></tr> 
		<tr><td>btn-primary</td><td>提供额外的视觉效果，标识一组按钮中的原始动作。</td></tr> 
		<tr><td>btn-success</td><td>表示一个成功的或积极的动作。</td></tr> 
		<tr><td>btn-info</td><td>信息警告消息的上下文按钮。</td></tr> 
		<tr><td>btn-warning</td><td> 表示应谨慎采取的动作。 </td></tr>
		<tr><td>btn-danger</td><td> 表示一个危险的或潜在的负面动作。</td></tr> 
		<tr><td>btn-link </td><td>并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为。</td></tr> 
	</table>
	
	<!-- 标准的按钮 -->
	<button type="button" class="btn btn-default">默认按钮</button>
	
	<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
	<button type="button" class="btn btn-primary">原始按钮</button>
	
	<!-- 表示一个成功的或积极的动作 -->
	<button type="button" class="btn btn-success">成功按钮</button>
	
	<!-- 信息警告消息的上下文按钮 -->
	<button type="button" class="btn btn-info">信息按钮</button>
	
	<!-- 表示应谨慎采取的动作 -->
	<button type="button" class="btn btn-warning">警告按钮</button>
	
	<!-- 表示一个危险的或潜在的负面动作 -->
	<button type="button" class="btn btn-danger">危险按钮</button>
	
	<!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
	<button type="button" class="btn btn-link">链接按钮</button>

	<h2>1.2-按钮大小</h2>
	<table class="table">
		<tr><th>Class</th> <th>描述</th></tr> 
		<tr><td>.btn-lg</td> <td>这会让按钮看起来比较大。</td></tr> 
		<tr><td>.btn-sm</td> <td> 这会让按钮看起来比较小。 </td></tr>
		<tr><td>.btn-xs</td> <td> 这会让按钮看起来特别小。</td></tr> 
		<tr><td>.btn-block</td> <td> 这会创建块级的按钮，会横跨父元素的全部宽度。</td></tr> 
	</table>
	<p>
		<button type="button" class="btn btn-primary btn-lg">
	      大的原始按钮
	   </button>
		<button type="button" class="btn btn-default btn-lg">
	      大的按钮
	   </button>
	</p>
	<p>
		<button type="button" class="btn btn-primary">
	      默认大小的原始按钮
	   </button>
		<button type="button" class="btn btn-default">
	      默认大小的按钮
	   </button>
	</p>
	<p>
		<button type="button" class="btn btn-primary btn-sm">
	      小的原始按钮
	   </button>
		<button type="button" class="btn btn-default btn-sm">
	      小的按钮
	   </button>
	</p>
	<p>
		<button type="button" class="btn btn-primary btn-xs">
	      特别小的原始按钮
	   </button>
		<button type="button" class="btn btn-default btn-xs">
	      特别小的按钮
	   </button>
	</p>
	<p>
		<button type="button" class="btn btn-primary btn-lg btn-block">
	      块级的原始按钮
	   </button>
		<button type="button" class="btn btn-default btn-lg btn-block">
	      块级的按钮
	   </button>
	</p>

	<h2>1.3-按钮状态</h2>
	<h3>1.3.1-激活状态</h3>
	<table class="table">
		<tr><th>元素描述</th> <th>Class</th></tr> 
		<tr><td>按钮元素</td> <td>添加 .active class 来显示它是激活的。</td></tr> 
		<tr><td>锚元素</td> <td> 添加 .active class 到 &lt;a&gt; 按钮来显示它是激活的。 </td></tr>
	</table>	
	
	<p>
		<button type="button" class="btn btn-default btn-lg ">
	      默认按钮
	   </button>
		<button type="button" class="btn btn-default btn-lg active">
	      激活按钮
	   </button>
	</p>
	<p>
		<button type="button" class="btn btn-primary btn-lg ">
	      原始按钮
	   </button>
		<button type="button" class="btn btn-primary btn-lg active">
	      激活的原始按钮
	   </button>
	</p>

	<h3>1.3.2-禁用状态</h3>
	<table class="table">
		<tr><th>元素描述</th> <th>Class</th></tr> 
		<tr><td>按钮元素</td> <td>添加 disabled 属性 到 &lt;button&gt; 按钮。</td></tr> 
		<tr><td>锚元素</td> <td>添加 disabled class 到 &lt;a&gt; 按钮。注意：该 class 只会改变&lt;a&gt;的外观，不会改变它的功能。在这里，您需要使用自定义的 JavaScript 来禁用链接。</td></tr>
	</table>
	
	<p>
		<button type="button" class="btn btn-default btn-lg">
	      默认按钮
	   </button>
		<button type="button" class="btn btn-default btn-lg" disabled="disabled">
	      禁用按钮
	   </button>
	</p>
	<p>
		<button type="button" class="btn btn-primary btn-lg ">
	      原始按钮
	   </button>
		<button type="button" class="btn btn-primary btn-lg" disabled="disabled">
	      禁用的原始按钮
	   </button>
	</p>
	<p>
		<a href="#" class="btn btn-default btn-lg" role="button">
			链接
		</a>
		<a href="#" class="btn btn-default btn-lg disabled" role="button">
			禁用链接
		</a>
	</p>
	<p>
		<a href="#" class="btn btn-primary btn-lg" role="button">
			原始链接
		</a>
		<a href="#" class="btn btn-primary btn-lg disabled" role="button">
			禁用的原始链接
		</a>
	</p>

	<h2>1.4-按钮标签</h2>
	<p>您可以在 &lt;a&gt;、&lt;button&gt; 或 &lt;input&gt; 元素上使用按钮 class。但是建议您在 &lt;button&gt; 元素上使用按钮 class，避免跨浏览器的不一致性问题。
	<br/>
	<a class="btn btn-default" href="#" role="button">&lt;a&gt;链接</a>
	<button class="btn btn-default" type="submit">&lt;button&gt按钮</button>
	<input class="btn btn-default" type="button" value="&lt;input&gt;输入">
	<input class="btn btn-default" type="submit" value="&lt;button&gt;提交">

		
		
		
		
	</body>
</html>
